<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
    <link rel="stylesheet" href="../static/iconfont/iconfont.css">
    <link rel="stylesheet" href="../static/css/xh.min.css">
    <title>CEP生态-注册账号</title>
</head>

<body>

    <div class="xh-container">
        <div class="xh-page active">
            <div class="navbar">
                <a href="javascript:history.back(-1);" class="navbar-icon"></a>
                <div class="navbar-title">注册账号</div>
            </div>
            <div class="xh-main">
                <div class="box">
                    <form action="" class="form forget-form">
                        <div class="form-line">
                            <div class="form-label font-md">手机号</div>
                            <div class="flex">
                                <input type="text" class="ipt form-ipt flex-item" id="mobile" />
                            </div>
                        </div>
                        <div class="form-line">
                            <div class="form-label font-md">验证码</div>
                            <div class="flex">
                                <input type="text" class="ipt form-ipt flex-item" id="verifyCode" />
                                <span class="ipt form-code" id="verifyCodePic"></span>
                            </div>
                        </div>
                        <div class="form-line">
                            <div class="form-label font-md">手机验证码</div>
                            <div class="flex">
                                <input type="text" class="ipt form-ipt flex-item" id="code" />
                                <span class="ipt form-code" id="phoneCodeBtn">获取验证码</span>
                            </div>
                        </div>
                        <div class="form-line">
                            <div class="form-label font-md">推荐人ID</div>
                            <div class="flex">
                                <input type="text" class="ipt form-ipt flex-item" id="invite_code" />
                            </div>
                        </div>
                        <div class="form-line">
                            <div class="form-label font-md">微信号</div>
                            <div class="flex">
                                <input type="text" class="ipt form-ipt flex-item" id="wx" />
                            </div>
                        </div>
                        <div class="form-line">
                            <div class="form-label font-md">登录密码</div>
                            <div class="flex">
                                <input type="password" class="ipt form-ipt flex-item" id="password" />
                            </div>
                        </div>
                        <div class="form-line">
                            <div class="form-label font-md">确认登录密码</div>
                            <div class="flex">
                                <input type="password" class="ipt form-ipt flex-item" id="surePassword" />
                            </div>
                            <div class="form-msg">至少使用数字、字母、特殊字符的两种密码</div>
                        </div>
                        <div class="form-line text-center">
                            <div class="inline-block">
                                    <div class="flex-center">
                                        <input type="checkbox" class="ckecbox mr-1" id="agreenment" />
                                        <a href="./registerAgreenment.html" class="color-orange font-sm" >同意 《会员手册》 电子协议</a>
                                    </div>
                                    <div class="submit-button" id="submitButton">注册</div>
                                    <div class="flex mt-2 text-left pl-2 pr-2">
                                        <div class="flex-item">
                                            <a href="./login.html" class="font-sm">已有账号? <strong>登录</strong></a>
                                        </div>
                                        <a href="" class="font-sm" id="appDoloadLink">点击 <strong>下载APP</strong></a>
                                    </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script src="../static/bower_components/jquery/dist/jquery.min.js"></script>
    <script src="../static/js/layer.js"></script>
    <script src="../static/js/util.js"></script>
    <script src="../static/js/http.js"></script>
    <script src="../static/js/template.js"></script>
    <script>
        (async function () {

            let applink = await $http.getApp()
            let appDoloadLink = Util.isAndroid ? applink.info.android : applink.info.ios
            $('#appDoloadLink').attr('href', appDoloadLink)

            const Dom = {
                card_tabbar: $('#card-tabbar'),
                card_tabbar_item: $('#card-tabbar .tabbar-item'),
                cards: $('.cards'),
                mobile: $('#mobile'),
                password: $('#password'),
                surePassword: $('#surePassword'),
                inviteCode: $('#invite_code'),
                tradPassword: $('#trad_password'),
                code: $('#code'),
                verifyCode: $('#verifyCode'),
                verifyCodePic: $('#verifyCodePic'),
                submitButton: $('#submitButton'),
                phoneCodeBtn: $('#phoneCodeBtn')
            }

            const Win = $(window)
            const Doc = $(document)

            let mobile = ''
            let verifyCode = ''
            let checkVerifyCode = ''
            let code = ''
            let password = ''
            let surePassword = ''
            let trad_password = ""
            let trad_password_sure = ""
            let invite_code = Util.getQueryString('code') || ''
            let agreenmentChecked = false
            let wx = ''

            if (invite_code) {
                Dom.inviteCode.val(invite_code)
            }

            async function main() {
                // todo 整个项目的入口
                renderModel = RenderModel()
                EventHandler()
            }

            function RenderModel() {
                // todo 实现和页面相关的数据交互方法
                let send = async function (params) {
                    return await $http.send(params)
                }

                let doRegister = async function (params) {
                    return await $http.doRegister(params)
                }

                return {
                    send,
                    doRegister
                }
            }
            function RenderBaseFrame() {
                // todo 渲染基本的UI结构
            }

            function EventHandler() {

                checkVerifyCode = Util.drawPic(Dom.verifyCodePic)

                Dom.verifyCodePic.click(function () {
                    checkVerifyCode = Util.drawPic(Dom.verifyCodePic)
                })

                // 获取手机验证码
                Dom.phoneCodeBtn.click(async function () {

                    if (!mobile) {
                        Util.showMsg('请先输入手机号')
                        return
                    }

                    let res = await renderModel.send({ mobile, config: 1 })
                    Util.sendSms($('#phoneCodeBtn'))
                    Util.showMsg(res.message)
                })

                // 修改密码提交
                Dom.submitButton.click(async function () {

                    // if (!mobile) {
                    //     Util.showMsg('请输入手机号')
                    //     return
                    // }
                    if (!verifyCode) {
                        Util.showMsg('请输入验证码')
                        return
                    }
                    if (verifyCode !== checkVerifyCode) {
                        Util.showMsg('验证码不正确')
                        return
                    }
                    // if (!code) {
                    //     Util.showMsg('请输入手机验证码')
                    //     return
                    // }
                    // if (!password) {
                    //     Util.showMsg('请输入新密码')
                    //     return
                    // }
                    // if (!surePassword) {
                    //     Util.showMsg('请确认新密码')
                    //     return
                    // }

                    if (password !== surePassword) {
                        Util.showMsg('登录密码和确认登录密码不一致')
                        return
                    }

                    if (!agreenmentChecked) {
                        Util.showMsg('请同意 《会员手册》 电子协议')
                        return
                    }

                    let params = { mobile, password, trad_password, code, wx, invite_code }
                    let res = await renderModel.doRegister(params)

                    Util.showMsg(res.message, function () {
                        if (res.code == 0) {
                            location.href = './login.html'
                        }
                    })

                })

                Dom.mobile.on('input', function () {
                    mobile = this.value
                })

                Dom.password.on('input', function () {
                    password = this.value
                })

                Dom.verifyCode.on('input', function () {
                    verifyCode = this.value
                })
                
                $('#wx').on('input', function () {
                   wx = this.value
                })

                Dom.code.on('input', function () {
                    code = this.value
                })
                Dom.tradPassword.on('input', function () {
                    trad_password = this.value
                })
                Dom.inviteCode.on('input', function () {
                    invite_code = this.value
                })

                checkVerifyCode = Util.drawPic(Dom.verifyCodePic)

                Dom.verifyCodePic.click(function () {
                    checkVerifyCode = Util.drawPic(Dom.verifyCodePic)
                })

                Dom.mobile.on('input', function () {
                    mobile = this.value
                })

                Dom.password.on('input', function () {
                    password = this.value
                })

                $('#surePassword').on('input', function () {
                    surePassword = this.value
                })

                Dom.verifyCode.on('input', function () {
                    verifyCode = this.value
                })

                $('#trad_password').on('input', function () {
                    trad_password = this.value
                })

                $('#trad_password_sure').on('input', function () {
                    trad_password_sure = this.value
                })

                $('#agreenment').on('change', function () {
                    agreenmentChecked = this.checked
                })
            }

            main()

        })()
    </script>
</body>

</html>